<!--
 * @Author: 刘翔
 * @Date: 2025-08-21 15:05:35
 * @LastEditTime: 2025-09-01 16:42:12
 * @LastEditors: your name
 * @Description:组合页面10(科室超支TOP10)
 * @FilePath: \建达文件\ts-demo\ts-demo\src\pptHome\pageList\pageType10.vue
-->
<template>
  <div class="page-type-10">
    <div class="page-type-10-top">
      <DataTable ref="table1" v-bind="getTableProps1()" />
    </div>
    <div class="page-type-10-bottom">
      <MixedChart class="page-type-10-bottom-chart1" ref="chart1" v-bind="getChartProps1()" />
      <BarChart class="page-type-10-bottom-chart2" ref="chart2" v-bind="getChartProps2()" />
    </div>
  </div>
</template>

<script>
import MixedChart from '../components/MixedChart.vue';
import BarChart from '../components/BarChart.vue';
import DataTable from '../components/DataTable.vue';
export default {
  name: 'pageType2',
  components: {
    MixedChart,
    BarChart,
    DataTable,
  },
  props: {
    chartList1: {
      type: Object,
      default: () => {},
    },
    chartList2: {
      type: Object,
      default: () => {},
    },
    tableData1: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    //获取表格配置
    getTableProps1() {
      return {
        tableParams: {
          headerHeight: 60,
          tableTitle: this.tableData1.title,
        },
        columns: this.tableData1.columns,
        tableData: this.tableData1.data,
        pptOptions: {
          x: 0.4, // X轴位置
          y: 3.3, // Y轴位置
          h: 2.2, // 高度
          title: {
            // 标题配置
            x: 0.5,
            y: 0.5,
            fontSize: 24,
            color: '363636',
            bold: true,
          },
          table: {
            // 表格配置
            colW: this.tableData1.columns.map(item => this.pptWidthPercentFn(item.widthPercent)),
            // 表格内容配置
            content: {
              fontSize: 8,
              color: '000000',
              bold: true,
            },
            // 表格标题配置
            title: {
              fontSize: 8,
              color: 'ffffff',
            },
            // 表格边框样式
            borderStyle: {
              color: '000000',
            },
            // 表格垂直对齐方式(middle, top, bottom)
            valign: 'middle',
            // 表格水平对齐方式(left, center, right)
            align: 'center',
            // 自动分页
            autoPage: false,
            // 自动分页标题是否显示
            autoPageRepeatHeader: false,
            // 自动分页标题行数
            autoPageHeaderRows: 1,
          },
        },
      };
    },
    // 计算ppt宽度百分比(9是ppt目前总宽度)
    pptWidthPercentFn(pptWidthPercent) {
      return (pptWidthPercent / 100) * 9;
    },
    //获取图表配置
    getChartProps1() {
      return {
        // 主系列数据
        primaryData: {
          categories: this.chartList1.data.map(item => item[this.chartList1.XShow]),
          values: this.chartList1.data.map(item => item[this.chartList1.keyList[0]]),
        },
        // 次系列数据
        secondaryData: {
          categories: this.chartList1.data.map(item => item[this.chartList1.XShow]),
          values: this.chartList1.data.map(item => item[this.chartList1.keyList[1]]),
        },
        // 系列类型
        seriesTypes: {
          primary: 'bar',
          secondary: 'line',
        },
        //是否共用Y轴
        shareYAxis: false,
        // 图例配置
        legend: {
          data: this.chartList1.keyList,
        },
        // 图表配置
        chartConfig: {
          height: 300,
          // 图例配置
          legend: {
            data: this.chartList1.keyList,
          },
          // 网格配置
          grid: {
            left: '3%',
            right: '5%',
            bottom: '5%',
            containLabel: true,
          },
          // 坐标轴配置
          axis: {
            // 分类轴配置
            category: {
              axisLabel: {
                color: '#333',
                fontSize: 14,
              },
              nameLocation: 'middle',
              nameGap: 30,
            },
            // 主值轴配置（CMI）
            primary: {
              name: this.chartList1.keyList[0],
              axisLabel: {
                formatter: '{value}',
                color: this.chartList1.colors[0],
                fontSize: 14,
              },
              nameTextStyle: {
                color: this.chartList1.colors[0],
                fontSize: 12,
              },
            },
            // 次值轴配置（均次费用）
            secondary: {
              name: this.chartList1.keyList[1],
              axisLabel: {
                formatter: '{value}',
                color: this.chartList1.colors[1],
                fontSize: 14,
              },
              nameTextStyle: {
                color: this.chartList1.colors[1],
                fontSize: 12,
              },
            },
          },
          // 系列配置
          series: {
            label: {
              show: true,
              position: 'top',
              fontSize: 18,
            },
            // 主系列配置
            primary: {
              name: this.chartList1.keyList[0],
              itemStyle: {
                color: this.chartList1.colors[0],
              },
            },
            // 柱状图通用配置
            bar: {
              barWidth: '40%',
              itemStyle: {
                color: this.chartList1.colors[0],
              },
            },
            // 次系列配置
            secondary: {
              name: this.chartList1.keyList[1],
              itemStyle: {
                color: this.chartList1.colors[1],
              },
            },
            // 折线图通用配置
            line: {
              itemStyle: {
                color: this.chartList1.colors[1],
              },
              lineStyle: {
                width: 2,
              },
              smooth: true,
            },
          },
        },
        pptOptions: {
          // 图表位置和大小
          position: {
            x: 0.3,
            y: 0.8,
            w: 9.4,
            h: 1.3,
          },
          // 标题配置
          title: {
            x: 0.5,
            y: 0.5,
            fontSize: 24,
            color: '363636',
            bold: true,
          },
          // 图表配置
          chart: {
            // 图例配置
            showLegend: true,
            legendPos: 'b',
            // 分类轴配置
            catAxes: [{ catAxisTitle: this.chartList1.XShow }, { catAxisHidden: true }],
            dataLabelFormatCode: [`[黑色],##0.00`, `[黑色],##0.00`],
            // 显示数据标签
            showValue: true,
            // 数据标签字体大小
            dataLabelFontSize: 7,
            // 值轴配置
            values: [
              {
                // 主值轴标题
                showValAxisTitle: false,
              },
              {
                // 次值轴标题
                showValAxisTitle: false,
              },
            ],
          },
        },
      };
    },
    getChartProps2() {
      return {
        title: this.chartList2.keyList[0],
        categories: this.chartList2.data.map(item => item[this.chartList2.XShow]),
        values: this.chartList2.data.map(item => item[this.chartList2.keyList[0]]),
        smooth: true,
        chartConfig: {
          height: 300,
          tooltip: {
            textStyle: {
              fontSize: 18,
            },
            formatter: '{b}: {c}',
          },
          grid: {
            left: '3%',
            right: '5%',
            bottom: '5%',
            containLabel: true,
          },
          xAxis: {
            axisLabel: {
              fontSize: 14,
            },
          },
          yAxis: {
            axisLabel: {
              fontSize: 18,
            },
          },
          series: {
            barWidth: '40%',
            itemStyle: {
              normal: {
                color: function (params) {
                  return params.data >= 0 ? '#4874cb' : '#ee6666';
                },
              },
            },
            label: {
              show: true,
              position: 'top',
              fontSize: 18,
              formatter: '{c}',
            },
          },
        },
        pptConfig: {
          // 图表位置和大小
          position: {
            x: 0.3,
            y: 1.9,
            w: 9.4,
            h: 1.1,
          },
          // 标题配置
          title: {
            x: 4.5,
            y: 3.1,
            fontSize: 12,
            color: '363636',
            bold: true,
          },
          // 图表配置
          chart: {
            showLegend: false,
            legendPos: 'b',
            showTitle: false,
            //显示值
            showValue: true,
            // 数据标签字体大小
            dataLabelFontSize: 7,
            dataLabelPosition: 'outEnd',
            dataLabelFormatCode: `[${this.chartList2.data.map(item => item[this.chartList2.keyList[0]]).every(item => item < 0) ? '红色' : '黑色'}],##0.00`,
          },
        },
      };
    },
    /**
     * 导出为PPT
     * @description 将页面中的所有图表导出到PPT
     * @param {Object} pptx pptxgen实例
     * @param {Object} slide 当前幻灯片实例
     */
    exportToPPT(pptx, slide) {
      this.$refs.chart1.exportToPPT(pptx, slide);
      this.$refs.chart2.exportToPPT(pptx, slide);
      this.$refs.table1.exportToPPT(pptx, slide);
    },
  },
};
</script>

<style lang="less" scoped>
.page-type-10 {
  height: 100%;
  .page-type-10-top {
    margin-bottom: 20px;
    height: calc(100% - 350px);
  }
  .page-type-10-bottom {
    display: flex;
    width: 100%;
    .page-type-10-bottom-chart1 {
      width: 50%;
    }
    .page-type-10-bottom-chart2 {
      width: 50%;
    }
  }
}
</style>
